<template>
  <div class="inner-page">
    <div class="content">
      <el-alert type="warning" :closable="false">
        <template v-slot:title>
          满足以下条件的学员将进入续费预警列表：
        </template>
      </el-alert>
      <el-radio-group v-model="form.type">
        <el-radio value="1">
          剩余课时 ≤
          <el-input
            v-model="form.remainingClass"
            style="width: 90px; margin: 0px 8px"
            @input="
              (value) =>
                (form.remainingClass = Number(value.replace(/[^\d]/g, '')))
            "
          />
          或 剩余天数 ≤
          <el-input
            v-model="form.remainingDay"
            style="width: 90px; margin: 0px 8px"
            @input="
              (value) =>
                (form.remainingDay = Number(value.replace(/[^\d]/g, '')))
            "
          />
        </el-radio>
        <el-radio value="2">
          剩余课时 ≤
          <el-input
            v-model="form.remainingClass"
            style="width: 90px; margin: 0px 8px"
            @input="
              (value) =>
                (form.remainingClass = Number(value.replace(/[^\d]/g, '')))
            "
          />
          且 剩余天数 ≤
          <el-input
            v-model="form.remainingDay"
            style="width: 90px; margin: 0px 8px"
            @input="
              (value) =>
                (form.remainingDay = Number(value.replace(/[^\d]/g, '')))
            "
          />
        </el-radio>
      </el-radio-group>
    </div>
    <div class="footer">
      <el-button type="primary" @click="saveSettings()"> 保存 </el-button>
    </div>
  </div>
</template>

<script setup>
import {
  saveSettingsAPI,
  getSettingsAPI,
} from "@/api/salesCenter/renewalAlert";

const { proxy } = getCurrentInstance();
const loading = ref(false);
const data = reactive({
  form: {
    id: null,
    remainingClass: 0,
    remainingDay: 0,
    type: "1",
  },
});

const { form } = toRefs(data);

function saveSettings() {
  loading.value = true;
  const { id, remainingClass, remainingDay, type } = form.value;
  saveSettingsAPI({
    id,
    remainingClass,
    remainingDay,
    type,
  }).then(() => {
    loading.value = false;
    proxy.$modal.msgSuccess("规则设置保存成功");
    getSettings();
  });
}

function getSettings() {
  loading.value = true;
  getSettingsAPI().then((res) => {
    loading.value = false;
    if (res.data) form.value = res.data;
  });
}

getSettings();
</script>

<style lang="scss" scoped>
.inner-page {
  height: calc(100vh - 180px);
  position: relative;
}
.footer {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

:deep .el-radio__input.is-checked + .el-radio__label {
  color: rgb(96, 98, 102);
}

.el-radio {
  margin-bottom: 12px;
  display: block;
}

.el-radio-group {
  display: block;
}
.el-alert {
  margin-bottom: 15px;
}
</style>
